

<div class="wrapper_board" style="width:1200px; margin:0px auto 50px;">


<?php echo $this->element('menu'); ?>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
        function readURL(input,thumbimage) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $("#thumbimage").attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
                $("#thumbimage").show();
            }
            else {
                $("#thumbimage").attr('src', input.value);
                $("#thumbimage").show();
            }
            $('.filename').text($("#uploadfile").val());
            $('.Choicefile').css('background', '#C4C4C4');
            $('.Choicefile').css('cursor', 'default');
            $(".Choicefile").unbind('click');
            $(".removeimg").show();
        }
        $(document).ready(function () {
            $(".Choicefile").bind('click', function () {
                $("#uploadfile").click();
                
            });
            $(".removeimg").click(function () {
                $("#thumbimage").attr('src', '').hide();
                $("#myfileupload").html('<input type="file" id="uploadfile" onchange="readURL(this);" />');
                $(".removeimg").hide();
                $(".Choicefile").bind('click', function () {
                    $("#uploadfile").click();
                });
                $('.Choicefile').css('background','#0877D8');
                $('.Choicefile').css('cursor', 'pointer');
                $(".filename").text("");
            });
        })
    </script>
    <style type="text/css">
    .Choicefile
    {
        display:block;
        background:#0877D8;
        border:1px solid #fff;
        color:#fff;
        width:100px;
        text-align:center;
        text-decoration:none;
        cursor:pointer;
        padding:5px 0px;
    }
    #uploadfile,.removeimg
    {
       display:none;
    }
    #thumbbox
    {
      position:relative;
      width:100px;
    }
    .removeimg
    {
      background: url("http://png-3.findicons.com/files/icons/2181/34al_volume_3_2_se/24/001_05.png") repeat scroll 0 0 transparent;

    height: 24px;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 24px;

    }
    </style>


<?php
echo $this->Form->create('Image', array('type' => 'file'));
echo $this->Form->input('Image.name');
?>
<div>
    <div id="myfileupload">
        <input type="file" id="uploadfile" onchange="readURL(this);" name="data[Image][url]" />
    </div>
    <div id="thumbbox">
        <img height="300" width="250" alt="Thumb image" id="thumbimage" style="display: none" />
        <a class="removeimg" href="javascript:" ></a>
     </div>
     <div id="boxchoice">
        <a href="javascript:" class="Choicefile">select image</a>
        <p style="clear:both"></p>
     </div>
     
   </div>


<?php
echo $this->Form->input('Image.description');

foreach($boards as $board){
        $boardSelects[$board['Board']['id']] = $board['Board']['name'];
    }
echo $this->Form->input(
        'boardId',
        array('options' => $boardSelects, 'default' => '1')
    );

foreach($categories as $category){
        $categorySelects[$category['Categorie']['id']] = $category['Categorie']['categoriename'];
    }
echo $this->Form->input(
        'Image.categorie_id',
        array('options' => $categorySelects, 'default' => '1')
    );

echo $this->form->input('Image.created',array('type'=>'hidden'));
echo $this->Form->end('add');
?>
</div>